<template>
  <div class="todo-footer">
    <label>
      <!-- 复选框:勾选,已经全部的事件完成  不勾选:事件并没有全部完成
         @是v-on简写方式
      
       -->
      <input type="checkbox" :checked="todoIsDone.length===todos.length && todos.length >0 " @change="changeHandler" />
    </label>
    <span> <span>已完成{{todoIsDone.length}}</span> / 全部{{todos.length}}</span>
    <button class="btn btn-danger" @click="clickHandler">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "",
  props:['todos','todoIsDone','updateAllDone','deleteDoneTodo'],
  methods:{
    //全选的复选框的回调函数
    changeHandler(e){
      //获取到复选框的勾选状态
      this.updateAllDone(e.target.checked);
    },
    //清除已经完成按钮的回调函数
    clickHandler(){
        //调用父组件的方法，通知父亲修改自身的数据！！！！
        this.deleteDoneTodo("我是子组件，给爹爹送两万块钱");
    }
  }
};
</script>

<style scoped>
</style>
